<template>
  <div class="evaluation-container">
    <h1 class="title">您对骑手满意吗？</h1>
    
    <div class="rating-options">
      <button
        class="rating-btn unsatisfied"
        :class="{ active: satisfaction === 'unsatisfied' }"
        @click="selectSatisfaction('unsatisfied')"
      >
        <span class="emoji">😞</span>
        <span>不满意</span>
      </button>
      <button
        class="rating-btn satisfied"
        :class="{ active: satisfaction === 'satisfied' }"
        @click="selectSatisfaction('satisfied')"
      >
        <span class="emoji">😊</span>
        <span>满意</span>
      </button>
    </div>
    
    <div class="tags-container" v-if="satisfaction">
      <span
        v-for="(tag, index) in currentTags"
        :key="index"
        class="tag"
        :class="{ selected: selectedTags.includes(tag) }"
        @click="toggleTag(tag)"
      >
        {{ tag }}
      </span>
    </div>
    
    <button
      class="submit-btn"
      :disabled="!satisfaction"
      @click="submitEvaluation"
    >
      写评价
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const satisfaction = ref(null)

// 不同满意度对应的不同标签
const tags = {
  satisfied: [
    '仪表整洁',
    '风雨无阻',
    '货品完好',
    '快速准时',
    '礼貌热情'
  ],
  unsatisfied: [
    '配送超时',
    '态度不好',
    '货品损坏',
    '仪表不整',
    '沟通不畅'
  ]
}

const selectedTags = ref([])

// 当前显示的标签
const currentTags = computed(() => {
  return satisfaction.value ? tags[satisfaction.value] : []
})

const selectSatisfaction = (type) => {
  satisfaction.value = type
  selectedTags.value = [] // 切换满意度时清空已选标签
}

const toggleTag = (tag) => {
  const index = selectedTags.value.indexOf(tag)
  if (index === -1) {
    selectedTags.value.push(tag)
  } else {
    selectedTags.value.splice(index, 1)
  }
}

const submitEvaluation = () => {
  console.log('提交评价:', {
    satisfaction: satisfaction.value,
    tags: selectedTags.value
  })
  alert('评价提交成功！')
  satisfaction.value = null
  selectedTags.value = []
}
</script>

<style scoped>
.evaluation-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: white; /* 白色背景 */
  border-radius: 10px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.title {
  text-align: center;
  font-size: 20px;
  color: #333;
  margin-bottom: 30px;
}

.rating-options {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
}

.rating-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 25px;
  border-radius: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  background-color: #f5f5f5; /* 灰色按钮背景 */
  cursor: pointer;
  transition: all 0.3s;
}

.rating-btn .emoji {
  font-size: 24px;
  margin-bottom: 5px;
  opacity: 0.5;
  transition: all 0.3s;
}

.rating-btn.active {
  background-color: white; /* 选中时按钮背景变白 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rating-btn.active .emoji {
  opacity: 1;
  transform: scale(1.2);
}

.rating-btn.unsatisfied.active {
  border-color: #ff9800;
}

.rating-btn.unsatisfied.active .emoji {
  color: #ff9800;
}

.rating-btn.satisfied.active {
  border-color: #4caf50;
}

.rating-btn.satisfied.active .emoji {
  color: #4caf50;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

.tag {
  padding: 8px 15px;
  background-color: #f5f5f5; /* 灰色标签背景 */
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.tag.selected {
  background-color: #2196f3;
  color: white;
}

.tag:hover {
  transform: translateY(-2px);
}

.submit-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #757575; /* 深灰色提交按钮 */
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
  opacity: 0.7;
}

.submit-btn:not(:disabled):hover {
  background-color: #616161;
  transform: translateY(-2px);
}
</style>